<template>
  <el-dialog
    width="90%"
    :title="$t('快递统计')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <el-row style="margin-bottom: 10px; text-align: right">
      <el-button
        v-hasPermi="['distribution:orderBatch:exportPostOfficeAmountStatistical']"
        type="primary"
        size="mini"
        @click="handleExport"
      >
        {{ $t('导出邮局金额统计') }}
      </el-button>
    </el-row>
    <!-- :height="calTableHeight() - 150" -->
    <el-table ref="TableRef" border show-summary :data="tableData" @selection-change="(rows) => (tableCheck = rows)">
      <el-table-column align="center" show-overflow-tooltip prop="typeName" width="150">
        <template #header>
          {{ $t('平台') }}
        </template>
        <template slot-scope="{ row }">
          <div>{{ row.typeName ? row.typeName : handleType(row.type) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="DM" prop="dm" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="NK" prop="nk" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="K" prop="k" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="sgw" prop="sgw" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="LP" prop="lp" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="KP-3CM" prop="kp3cm" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="LP-3-4" prop="lp34" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="U-1-25" prop="u125" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="U-1-50" prop="u150" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="U-3-50" prop="u350" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="U-3-100" prop="u3100" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="T-50" prop="t50" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="T-100" prop="t100" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="T-150" prop="t150" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="T-250" prop="t250" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="T-500" prop="t500" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('自派送')" prop="sd" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('总数')" prop="total" show-overflow-tooltip>
        <template slot-scope="scope">
          <div :style="handleRowStyle(scope).style">{{ handleRowStyle(scope).value }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { statisticalExpress, exportPostOfficeAmountStatistical } from '@/api/distribution/orderBatchs/index'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * shop_type_list
     */
    shop_type_list: {
      type: Array,
      required: true,
      default: () => [],
    },
    /**
     * batchIdList
     */
    batchIdList: {
      type: Array,
      required: true,
      default: () => [],
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      showSearch: true,
      tableCheck: [],
      tableData: [],
      total: 0,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.tableData = []
        this.getList()
      }
    },
  },
  methods: {
    handleExport() {
      this.download(
        'distribution/orderBatch/exportPostOfficeAmountStatistical',
        {
          batchIdList: this.batchIdList.map((i) => i.id),
        },
        `postOfficeAmountStatistical_${new Date().getTime()}.xlsx`,
      )
    },
    handleRowStyle(args) {
      const property = args.column.property
      const value = args.row[property]
      return {
        value,
        style: {
          color: value > 0 ? '#1890ff' : '#cccc',
          fontWeight: 'bold',
        },
      }
    },
    handleType(type) {
      const index = this.shop_type_list.findIndex((i) => i.dictValue == type)
      return this.shop_type_list[index]?.dictLabel
    },
    getList() {
      statisticalExpress({ batchIdList: this.batchIdList.map((i) => i.id) }).then((res) => {
        this.tableData = res.data
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
